<template>
  <div class='index'>
    <mu-carousel hide-controls="true">
      <mu-carousel-item v-for="item in bannerList" :key="item.id">
        <router-link :to="{path:'/main/comicInfo',query:{comicId:item.href.replace(/\D/g,'')}}">
          <img class='bannerImg' v-lazy:background-image="item.pic"></router-link>
        </router-link>
      </mu-carousel-item>
    </mu-carousel> <!-- 功能导航区 -->
    <ul class="menu-list">
      <li class="item">
        <router-link class="link" to="/main/sort">
          <i class="icon category"></i>
          <span class="name">分类</span>
        </router-link>
      </li>
      <li class="item">
        <router-link to="/main/rank" class='link'>
          <i class="icon rank"></i>
          <span class="name">排行</span>
        </router-link>
      </li>
      <li class="item">
        <router-link class="link" to="/main/update">
          <i class="icon time"></i>
          <span class="name">追更</span>
        </router-link>
      </li>
      <li class="item hisbox">
        <mu-chip @click='gohis' v-if='showhisBox&&lastComic' class='histag' color="#fff" @delete="showhisBox=false"
          delete>
          <mu-avatar :size="28" color="blue">
            <img v-lazy='imgSrc' />
          </mu-avatar>
          <span class='his'>
            {{lastComic}}</span>
        </mu-chip>
        <router-link class="link" to="/main/history">
          <i class="icon history">[钟]</i>
          <span class="name">历史</span>
        </router-link>
      </li>
    </ul>

    <!-- 推荐 -->
    <!-- <div :class="{'rec':true,'four': }">
      <div class=" mu-sub-header b">热门推荐</div>
      <div class='mh_list flex'>
        <div class='mh_item' v-for="item in recommendHot" :key="index">
          <img :src="item.pic">
          <div class='mh_des'>
            <div class='text_sub'>{{item.title}}</div>
            <div class='subtitle text_sub'><span>{{item.desc}}</span></div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 新作 -->
    <div v-for="work,index in recommendHot" :key="work.id" :class="{'rec':true,'more':work.list.length>4}">
      <div class=" mu-sub-header b">{{work.title}}</div>
      <div class='mh_list flex'>
        <div @click=goRead(item.href) v-if="!work.special" class='mh_item' v-for="item in work.list" :key="item.id">
          <img :src="item.pic">
          <div class='mh_des'>
            <div class='text_sub'>{{item.title}}</div>
            <div class='subtitle text_sub'><span>{{item.desc}}</span></div>
          </div>
        </div>
        <router-link :to="{path:'/main/sort',query:{type:type.href}}" v-if='index==1' class='flex type' v-for="type in types"
          :key="type.id">
          <div class="typebox flex flex-column">
            <div class="pic">
              <img v-lazy='type.pic' />
            </div>
            <div class=typeText v-text="type.title"></div>
          </div>
        </router-link>
        <div class='special' v-if="work.special">
          <div class="flex">
            <div class='s_r flex flex-column'>
              <div @click=goRead(work.list[0].href) class='mh_item flex_2' :style="{background:`url('${work.list[0].pic}') center center / cover no-repeat`}">
                <!-- <img :src="work.list[0].pic"> -->
                <div class='mh_des'>
                  <div class='text_sub'>{{work.list[0].title}}</div>
                  <div class='subtitle text_sub'><span>{{work.list[0].desc}}</span></div>
                </div>
              </div>
              <div @click=goRead(work.list[1].href) class='mh_item flex_3' :style="{background:`url('${work.list[1].pic}') center center / cover no-repeat`}">
                <!-- <img :src="work.list[1].pic"> -->
                <div class='mh_des'>
                  <div class='text_sub'>{{work.list[1].title}}</div>
                  <div class='subtitle text_sub'><span>{{work.list[1].desc}}</span></div>
                </div>
              </div>
            </div>
            <div @click=goRead(work.list[2].href) class='s_r flex flex-column'>
              <div class='mh_item flex_3' :style="{background:`url('${work.list[2].pic}') center center / cover no-repeat`}">
                <!-- <img :src="work.list[2].pic"> -->
                <div class='mh_des'>
                  <div class='text_sub'>{{work.list[2].title}}</div>
                  <div class='subtitle text_sub'><span>{{work.list[2].desc}}</span></div>
                </div>
              </div>
              <div @click=goRead(work.list[3].href) class='mh_item flex_2' :style="{background:`url('${work.list[3].pic}')  center center / cover no-repeat`}">
                <img :src="work.list[3].pic">
                <div class='mh_des'>
                  <div class='text_sub'>{{work.list[3].title}}</div>
                  <div class='subtitle text_sub'><span>{{work.list[3].desc}}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang='less'>
  @import './index';

</style>
<script>
  export default {
    data() {
      return {
        bannerList: [],
        recommendHot: [],
        types: [],
        lastComic: '',
        imgSrc: '',
        showhisBox: true,
        lastComicId: '',
      };
    },
    mounted() {
      this.$http.get('http://y.yuduo.top/index/Manhua/getBanner').then(res => {
        let data = res.status == 200 && res.data ? res.data : '';
        data.map(item => {
          item.pic = item.pic.match(/\/\/\S*g/)[0];
        })
        this.bannerList = data;
      })
      this.getRecommendHot();
      this.getHistory();
    },

    methods: {

      gohis() {
        this.$router.push({
          path: '/main/read',
          query: {
            comicId: this.lastComicId
          }
        });
      },
      getHistory() {
        this.$vlf.createInstance({
          name: 'mh',
          storeName: 'comicInfo',
        }).then(info => {
          setTimeout(() => {
            info.getItem('history').then(hisArr => {
              if (!hisArr) return;
              let lastest = hisArr.splice(-1)[0];
              if (lastest) {
                this.lastComic = lastest.name + ':' + lastest.title;
                this.lastComicId = lastest.comicId;
                this.imgSrc = `https://image.mhxk.com/mh/${lastest.comicId}.jpg-noresize.webp`;
              } else {
                this.showhisBox = false;
              }
            })
          }, 1000);
        });
      },
      goRead(comicId) {
        this.$router.push({
          path: '/main/comicInfo',
          query: {
            comicId: comicId.replace(/\D/g, '')
          }
        })
      },
      getRecommendHot() {
        this.$http.get('http://y.yuduo.top/index/Manhua/getMhList').then(res => {
          let data = res.status == 200 && res.data ? res.data : '';
          this.types = data.types[0];
          delete data.types;
          this.recommendHot = data;
        })
      },
    }
  };

</script>
